<!-- 下拉选择设置组件 -->
<template>
    <div class="setting_config">
        <div class="label_title">
            <Icon type="md-create" size="18" color="#1055FF" />
            <div class="title">下拉选择</div>
        </div>
        <div class="base_config">
            <div class="title">基本设置</div>
            <div class="config_item">
                <div class="label">字段名</div>
                <div class="input">
                    <Input v-model="dynamicForm.formList[dynamicForm.currentIndex].key" clearable />
                </div>
            </div>
            <div class="config_item">
                <div class="label">输入框提示语</div>
                <div class="input">
                    <Input v-model="dynamicForm.formList[dynamicForm.currentIndex].config.placeholder" clearable />
                </div>
            </div>
            <div class="config_item">
                <div class="label">是否可多选</div>
                <div class="input">
                    <Switch v-model="dynamicForm.formList[dynamicForm.currentIndex].config.multiple" />
                </div>
            </div>
            <div class="config_item">
                <div class="label">选项类型</div>
                <div class="input">
                    <RadioGroup v-model="dynamicForm.formList[dynamicForm.currentIndex].config.optionType">
                        <Radio label="dynamic">自定义选项</Radio>
                        <Radio label="request">请求选项</Radio>
                    </RadioGroup>
                </div>
            </div>
            <div class="config_item"
                v-if="dynamicForm.formList[dynamicForm.currentIndex].config.optionType == 'dynamic'">
                <div class="label">自定义选项</div>
                <draggable v-model="dynamicForm.formList[dynamicForm.currentIndex].config.optionList">
                    <template #item="{ element, index }">
                        <div class="input option_box" :key="index">
                            <Icon type="md-shuffle" size="15" />
                            <div class="input_flex_box">
                                <div class="label">显示:</div>
                                <Input v-model="element.label" placeholder="显示" clearable />
                            </div>
                            <div class="input_flex_box">
                                <div class="label value">值:</div>
                                <Input v-model="element.value" placeholder="值" clearable />
                            </div>
                            <Icon type="ios-trash-outline" size="18" color="#ed4014" class="del_icon"
                                @click.stop="dynamicForm.delOption(index)" />

                        </div>
                    </template>
                </draggable>
            </div>
            <div class="option_add"
                v-if="dynamicForm.formList[dynamicForm.currentIndex].config.optionType == 'dynamic'">
                <div class="add_item" @click="dynamicForm.addOption">
                    <Icon type="md-add" />
                    <div class="label">添加选项</div>
                </div>
                <div class="line"></div>
                <div class="add_item">
                    <div class="label" @click="openModal">批量编辑</div>
                </div>
            </div>
            <div class="config_item"
                v-if="dynamicForm.formList[dynamicForm.currentIndex].config.optionType == 'request'">
                <div class="label">请求地址:</div>
                <div class="input">
                    <Input v-model="dynamicForm.formList[dynamicForm.currentIndex].config.requestUrl" placeholder="请求地址"
                        clearable />
                </div>
            </div>
            <div class="config_item" v-if="dynamicForm.formList[dynamicForm.currentIndex].config.optionType == 'request'">
                <div class="label">显示名-键:</div>
                <div class="input">
                    <Input v-model="dynamicForm.formList[dynamicForm.currentIndex].config.labelKey" placeholder="显示名-键"
                        clearable />
                </div>
            </div>
            <div class="config_item" v-if="dynamicForm.formList[dynamicForm.currentIndex].config.optionType == 'request'">
                <div class="label">值-键:</div>
                <div class="input">
                    <Input v-model="dynamicForm.formList[dynamicForm.currentIndex].config.valueKey" placeholder="值-键"
                        clearable />
                </div>
            </div>
        </div>
        <div class="rules_config">
            <div class="title">验证设置</div>
            <div class="config_item">
                <div class="label">是否必填</div>
                <div class="input">
                    <Switch v-model="dynamicForm.formList[dynamicForm.currentIndex].required" />
                </div>
            </div>
            <div class="config_item" v-if="dynamicForm.formList[dynamicForm.currentIndex].required">
                <div class="label">为空时错误提示</div>
                <div class="input">
                    <Input v-model="dynamicForm.formList[dynamicForm.currentIndex].rules[0].message" clearable />
                </div>
            </div>
        </div>
    </div>
    <Modal class="add_form" v-model="modal" title="批量编辑" :mask-closable="false" draggable sticky scrollable
        @on-cance="cancel" width="800px">
        <div>填写或复制文本到下方输入框中，每个选项独占一行( 格式： 显示名-值 )</div>
        <div>注意：更改后的选项会被作为一个新增的选项，这将会影响已经收集的数据，请谨慎修改已有选项</div>
        <Input type="textarea" :rows="10" v-model="optionStr" />
        <template #footer>
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="submit">保存</Button>
        </template>
    </Modal>
</template>

<script setup>
import { ref } from 'vue';
import { dynamicFormStore } from '@/store/dynamicForm';
import draggable from 'vuedraggable';

// 是否显示模态框
const modal = ref(false);

// 自定义表单状态对象
const dynamicForm = dynamicFormStore();

// 选项字符串
const optionStr = ref('');

// 打开批量编辑
const openModal = () => {
    if (dynamicForm.formList[dynamicForm.currentIndex].config.optionList.length) {
        optionStr.value = dynamicForm.formList[dynamicForm.currentIndex].config.optionList.map(item => `${item.label}-${item.value}`).join('\n');
    } else {
        optionStr.value = '';
    }
    modal.value = true;
}

// 取消批量编辑
const cancel = () => {
    modal.value = false;
}

// 保存编辑
const submit = () => {
    let lst = [];
    if (!optionStr.value) {
        dynamicForm.batchEditOptionList(lst);
    } else {
        lst = optionStr.value.split('\n').map(item => {
            const [label, value] = item.split('-');
            return { label, value: parseInt(value) };
        });
    }
    dynamicForm.batchEditOptionList(lst);
    modal.value = false;
}

</script>

<style scoped lang="scss">
.setting_config {
    .label_title {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #f1f1f1;

        .title {
            margin-left: 5px;
            font-weight: bold;
        }
    }

    .base_config {
        border-bottom: 1px solid #f1f1f1;
        padding-bottom: 10px;

        .title {
            padding: 10px 0;
            font-weight: bold;
        }

        .config_item {
            margin-bottom: 10px;

            .label {
                padding-bottom: 10px;
            }

            .option_box {
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                .input_flex_box {
                    display: flex;
                    align-items: center;

                    :deep(.ivu-input) {
                        width: 80px;
                    }

                    &>div:first-child {
                        flex-shrink: 0;
                        margin-right: 10px;
                        padding-bottom: 0;
                    }

                    .value {
                        margin-left: 10px;
                    }
                }

                .ivu-icon-md-shuffle {
                    margin-right: 3px;
                    cursor: grab;
                }

                .del_icon {
                    margin-left: 10px;
                    cursor: pointer;
                }
            }
        }

        .option_add {
            display: flex;
            align-items: center;

            .add_item {
                display: flex;
                align-items: center;
                cursor: pointer;

                &:hover {
                    color: #2d8cf0;
                }
            }

            .line {
                width: 1px;
                height: 14px;
                background-color: #ccc;
                margin: 0 10px;
            }
        }
    }

    .rules_config {
        .title {
            padding: 10px 0;
            font-weight: bold;
        }

        .config_item {
            margin-bottom: 10px;

            .label {
                padding-bottom: 10px;
            }
        }
    }
}
</style>